<template>
	<view class="container">
			<uni-section class="mb-10" :title="'共' + total + '条'" type="line"></uni-section>
			<image class="image" :src="noData" mode="widthFix" v-if="total == 0"></image>
			<text class="uni-body noData" v-if="total == 0">暂无数据</text>
			<uni-card :title="item.name ? item.name : ''"
			          :sub-title="'状态：'+ selectDictLabel(sys_show_hide, item.status) + '\n排序：'+ item.sort"
			          :is-full="false" :is-shadow="true"
			          v-for="(item, index) in tableData" :key="index">
				<uni-row style="margin-bottom:20rpx;">
					<uni-col :span="12" :push="4"  @click.native="handleUpdate(item)">
						<uni-icons type="compose" size="20" color="#999"></uni-icons>
						<text class="card-actions-item-text">修改</text>
					</uni-col>
					<!-- <uni-col :span="12" :push="4"  @click.native="handleUpdate(item)">
						<switch checked  />
					</uni-col> -->
					<uni-col :span="12" :push="4" @click.native="handleDelete(item)">
						<uni-icons type="trash" size="20" color="#999"></uni-icons>
						<text class="card-actions-item-text">删除</text>
					</uni-col>
				</uni-row>
			</uni-card> 
		<uni-load-more :status="status" v-if="total > 0"/>
		<addCom :sharePacket="sharePacket" @click.native="addMember"></addCom>
	</view>
	
</template>

<script>
import {checkPermi} from "@/utils/permission";
import {memberApi} from '@/api/module';
import {getDictValue, selectDictLabel} from '@/api/system/dict/data';
 import addCom from '@/components/addCom';

export default {
	components:{
		addCom  
	},
	data() {
		return {
			//数据
			tableData: [],
			//加载
			tableLoading: true,
			//统计
			total: 0,

			//查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 20,
				name: "",
			},

			status: 'more',
			noData: "/static/images/noData.png",
			imageStyle: {
				height: uni.getSystemInfoSync().windowHeight
			},
			//打开开关、
			sharePacket: {
				isState: false, //默认不显示
				touchstart:false
			},
			sys_show_hide:[],

		}
	},
	onLoad() {

		//获取数据
		this.getList();
		getDictValue("sys_show_hide", this);
	},
	onReachBottom() {

		if (this.tableData.length < this.total) {
			this.status = 'loading';
			this.queryParams.pageNum = this.queryParams.pageNum + 1
			this.getList();
		}
		console.log('已触底');
	},
	onReady() {

	},
	methods: {
		//权限
		checkPermi,
		selectDictLabel,
		//获取数据
		async getList() {
			this.tableLoading = true;
			
			let response = await memberApi.listMember(this.queryParams);
			let code = response.code;
			if(200 == code){
				let list = response.rows
				
				if (this.queryParams.pageNum > 1) {
					this.tableData = [...this.tableData, ...list]
				} else {
					this.tableData = list;
				}
				this.total = response.total;
				
			}
			
			if (this.tableData.length != this.total) {
				this.status = 'more';
			} else {
				this.status = 'no-more';
			}
			this.tableLoading = false;
		},


		/**
		 * 修改按钮操作
		 * @param {Object} row 数据
		 */
		handleUpdate(row) {
			this.$tab.navigateTo('/pages/module/member/index?formData=' + JSON.stringify(row));
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.$modal.confirm('是否删除名称为“' + row.name + '”的人员信息？').then(function () {
				return memberApi.delMember(row.userId);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {
			});
		},
		addMember(){
			this.$tab.navigateTo('/pages/module/member/index');
		}
	}
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}

uni-card {
  font-size: 1px
}

.detailButton:after {
  border-color: black;
}

.bankLoanInfo {
  text-decoration: underline
}

.image {
  width: 80px;
  height: 80px !important;
  position: relative;
  left: 41%;
  margin-top: 50%;
}

.uni-body.noData {
  position: relative;
  left: 23.5%;
  color: #888;
  line-height: 620px;
}

.content {
  margin: 0 6px;
}
.card-actions-item-button{
	width:100%;
	text-align: center;
}
</style>
